<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>文档处理--元素删除</title>
        <style>
          div {
            background: lavenderblush;
            padding: 20px;
          }
          p {
            background: lemonchiffon;
            padding: 20px;
          }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script>
          $(function () {
            //remove() - 删除被选元素（及其子元素）
            $('#btn1').click(function () {
              $('div').remove(); //所有的div元素及其子元素被删除
            });
            //remove(筛选条件) - 删除符合筛选条件的元素
            $('#btn2').click(function () {
              $('div').remove('.test'); //所有的div元素中引用了class="test"的div被删除
            });
            //empty() - 从被选元素中删除子元素
            $('#btn3').click(function () {
              $('div').empty(); //删除div中的所有子元素
            });
          });
        </script>
      </head>
      <body>
        <button id="btn1">remove()</button>
        <button id="btn2">remove(筛选条件)</button>
        <button id="btn3">empty()</button>
        <div>
          div1
          <p>div1中的段落1</p>
          <p>div1中的段落2</p>
          <span style="background: lightblue; padding: 10px">div1中的span</span>
        </div>
        <br />
        <div class="test">div2</div>

        <p>p1</p>
      </body>
    </html>
  </body>
</html>
